<main class="main border">
  <div class="container-fluid">

    <div class="row border">
      顶部
    </div>

    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-6 col-sm-push-2 border">
        <h3 class="text-center">主体</h3>

        <div class="smallbody">
          <!-- 代码 开始 -->
          <div class="container111">
            <div id="grid-gallery" class="grid-gallery">
              <section class="grid-wrap">
                <ul class="grid">
                  <li>
                    <figure>
                      <a href="#" class="thumbnail">
                        <img src="./assets/imgs/3.jpg" alt="img03"/>
                      </a>
                      <figcaption><h3>热点词汇</h3>
                        <p>Chillwave hoodie ea gentrify aute sriracha consequat. </p>
                        <p style="margin-top:10px;"><a href="#" class="btn btn-primary" role="button">点赞</a> <a href="#"
                                                                                                                class="btn btn-default"
                                                                                                                role="button">反对</a>
                          <a href="#"
                             class="btn btn-default"
                             role="button">评论</a>
                        </p></figcaption>
                    </figure>
                  </li>

                  <li>
                    <figure>
                      <a href="#" class="thumbnail">
                        <img src="./assets/imgs/3.jpg" alt="img03"/>
                      </a>

                      <figcaption><h3>热点词汇</h3>
                        <p>Ex disrupt cray yr, butcher pour-over magna umami kitsch before they sold out commodo. </p>
                        <p style="margin-top:10px;"><a href="#" class="btn btn-primary" role="button">点赞</a> <a href="#"
                                                                                                                class="btn btn-default"
                                                                                                                role="button">反对</a>
                          <a href="#"
                             class="btn btn-default"
                             role="button">评论</a>
                        </p></figcaption>
                    </figure>
                  </li>

                </ul>
              </section><!-- // grid-wrap -->
              <section class="slideshow">
                <ul>


                </ul>
                <nav>
                  <span class="icon nav-prev"></span>
                  <span class="icon nav-next"></span>
                  <span class="icon nav-close"></span>
                </nav>
                <div class="info-keys icon">Navigate with arrow keys</div>
              </section><!-- // slideshow -->
            </div><!-- // grid-gallery -->
          </div>
          <script src="js/imagesloaded.pkgd.min.js"></script>
          <script src="js/masonry.pkgd.min.js"></script>
          <script src="js/classie.js"></script>
          <script src="js/cbpgridgallery.js"></script>

          <!-- 代码 结束 -->
          <script>
            new CBPGridGallery(document.getElementById('grid-gallery'));
          </script>
        </div>


      </div>
      <div class="col-sm-2 col-sm-pull-6 border panel panel-primary">
        <div class="panel-heading">
          <h3 class="text-center">历史的今天</h3>
        </div>
        <div class="list-group panel-body">
          <a href="#" class="list-group-item border"><span class="badge">5902</span>图解CSS3</a>
          <a href="#" class="list-group-item border"><span class="badge">15902</span>W3cplus</a>
          <a href="#" class="list-group-item border"><span class="badge">59020</span>慕课网</a>

          <a href="#" class="list-group-item border" style="border-bottom: 1px solid #000000;"><span
            class="badge">0</span>Sass中国</a>
        </div>

      </div>
      <div class="col-sm-2 border panel panel-primary" style="padding: 0;">
        <div class="panel-heading">
          <h3 class="text-center">历史时间轴</h3>
        </div>
        <div class="timeline ">
          <div class="timeline-data">
            <ul class="list-unstyled">
              <li class="timeline-data-item">
                <span class="label label-primary timestamp">10:25</span>
                <a href="#item001">
                  <dl>
                    <dt>
                      <strong class="text-info">大疆无人机“炸机”打上单的大法官发送实打实大幅</strong><br>
                      <span class="small">大疆无人机神话破灭法规和分工会和衡水的对符合符合人体和液体是的法规发生的更改的风格电饭锅电饭锅对方告诉对方个地方官的个人会员日台土豪哥和你打工行加扣扣语音...</span>
                    </dt>
                  </dl>
                </a>
              </li>

              <li class="timeline-data-item">
                <span class="label label-primary timestamp">10:25</span>
                <a href="#item001">
                  <dl>
                    <dt>
                      <strong class="text-info">大疆无人机“炸机”打上单的大法官发送实打实大幅</strong><br>
                      <span class="small">大疆无人机神话破灭...</span>
                    </dt>
                  </dl>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-sm-1"></div>
    </div>

    <div class="row border">
      <div class="col-md-4 col-md-push-4">
        <h3 class="text-center">主体底部</h3>
      </div>
    </div>

  </div>
</main>
<router-outlet></router-outlet>
